import React, { useState } from 'react';
import {
  Container,
  Box,
  Tabs,
  Tab,
  Typography,
} from '@mui/material';
import ProfileHeader from '../components/profile/ProfileHeader';
import StatsOverview from '../components/profile/StatsOverview';
import GameLibrary from '../components/profile/GameLibrary';
import Favorites from '../components/profile/Favorites';
import Reviews from '../components/profile/Reviews';
import EditProfileDialog from '../components/profile/EditProfileDialog';

// Mock data
const mockUser = {
  id: '1',
  username: 'TestUser',
  name: 'TestUser',  // 添加name字段
  email: 'test@example.com',
  avatar: 'https://mui.com/static/images/avatar/1.jpg',
  level: 25,
  exp: 7500,
  nextLevelExp: 10000,
  joinDate: '2023-01-01',
  bio: '热爱游戏的玩家',
};

const mockStats = {
  gamesCount: 42,
  totalPlayTime: '168小时',
  reviewsCount: 15,
  favoritesCount: 24,
  friendsCount: 36,
};

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

const TabPanel = (props: TabPanelProps) => {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`profile-tabpanel-${index}`}
      aria-labelledby={`profile-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ py: 3 }}>{children}</Box>}
    </div>
  );
};

interface User {
  id: string;
  username: string;
  name: string;
  email: string;
  avatar: string;
  level: number;
  exp: number;
  nextLevelExp: number;
  joinDate: string;
  bio: string;
}

const Profile: React.FC = () => {
  const [tabValue, setTabValue] = useState(0);
  const [user, setUser] = useState<User>(mockUser);
  const [editDialogOpen, setEditDialogOpen] = useState(false);

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setTabValue(newValue);
  };

  const handleEditProfile = () => {
    setEditDialogOpen(true);
  };

  const handleEditDialogClose = () => {
    setEditDialogOpen(false);
  };

  const handleSaveProfile = (updatedUser: User) => {
    setUser(prevUser => ({
      ...prevUser,
      ...updatedUser,
    }));
    setEditDialogOpen(false);
  };

  return (
    <Container maxWidth="lg" sx={{ py: 4 }}>
      <ProfileHeader user={user} onEdit={handleEditProfile} />
      <StatsOverview stats={mockStats} />

      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
        <Tabs
          value={tabValue}
          onChange={handleTabChange}
          aria-label="profile tabs"
          variant="scrollable"
          scrollButtons="auto"
        >
          <Tab label="我的游戏库" />
          <Tab label="收藏夹" />
          <Tab label="我的评论" />
          <Tab label="成就中心" />
          <Tab label="好友列表" />
        </Tabs>
      </Box>

      <TabPanel value={tabValue} index={0}>
        <GameLibrary />
      </TabPanel>

      <TabPanel value={tabValue} index={1}>
        <Favorites />
      </TabPanel>

      <TabPanel value={tabValue} index={2}>
        <Reviews />
      </TabPanel>

      <TabPanel value={tabValue} index={3}>
        <Typography variant="h6" gutterBottom>
          成就中心
        </Typography>
        {/* TODO: 添加成就组件 */}
      </TabPanel>

      <TabPanel value={tabValue} index={4}>
        <Typography variant="h6" gutterBottom>
          好友列表
        </Typography>
        {/* TODO: 添加好友列表组件 */}
      </TabPanel>

      <EditProfileDialog
        open={editDialogOpen}
        user={user}
        onClose={handleEditDialogClose}
        onSave={handleSaveProfile}
      />
    </Container>
  );
};

export default Profile;
